
import { FC } from 'react';
import { ActionSheet } from "@taroify/core"
import { View, Text } from '@tarojs/components';
import i18n from "i18n-js";
import SafeAreaView from "@/components/SafeAreaView";
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';

import './BottomAlert.scss';

const dstyles = GStyleSheet.create({
  bottomButton: {
    flex: 1,
    color: DynamicColors.normalTextColor,
    textAlign: 'center',
    height: 40,
    lineHeight: '40px',
  },
  confirm: {
    borderLeftWidth: 1,
    borderLeftColor: DynamicColors.screenBackgroundGaryColor,
    borderLeftStyle: 'solid',
  },
  line: {
    height: 10,
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
  }
});

interface IProps {
  isOpened: boolean;
  onCancel?: () => void;
  onConfirm?: () => void;
  showConfirm?: boolean;
  showCancel?: boolean;
}

const BottomAlert: FC<IProps> = (props) => {
  const { showConfirm = true, showCancel = true, onCancel, onConfirm, children, isOpened } = props;
  const styles = dstyles.useDynamicStyle();
  console.log('isOpened', isOpened);
  return (
    <ActionSheet open={isOpened} onClose={onCancel}>
      <View>
        {children}
      </View>
      {(showConfirm || showCancel) && <View>
        <View style={styles.line} />
        <SafeAreaView>
          <View className='centerFlex'>
            {showCancel && <Text style={styles.bottomButton} onClick={onCancel}>{i18n.t('CANCEL')}</Text>}
            {showConfirm && <Text style={{ ...styles.bottomButton, ...styles.confirm }} onClick={onConfirm}>{i18n.t('CONFIRM')}</Text>}
          </View>
        </SafeAreaView>
      </View>}
    </ActionSheet>

  );
};

export default BottomAlert;
